<template>
  <div id='complaint'>
    <v-title>
    </v-title>
    <van-tabs animated
      @click=onClick
      color='rgba(26, 144, 255)'>
      <van-tab title="投诉列表"
        name=0>
      </van-tab>
      <van-tab title="被投诉列表"
        name=1>
      </van-tab>
    </van-tabs>
    <v-list>
      <h4
        v-if='Complaintlist.length?false:true'>
        暂无投诉处理</h4>
      <div class='message'
        v-for='(item,index) in Complaintlist'
        :v-if='Complaintlist.length?true:false'
        :key=index>
        <div
          @touchstart='gettaskinfo(item.mid,index)'>
          <van-icon
            class='icon'
            size='40'
            color='rgba(26, 144, 255)'
            :name='item.typeicon' />
          <span
            class='messageinfo'>
            <h4>
              类型:{{item.typename}}
            </h4>
            <span
              class='user'>投诉详情:{{item.cDetail}}</span>
            <span
              class='time'>投诉时间:{{item.ctime}}</span>
          </span>
        </div>
        <button
          v-if='item.status==0?true:false'>
          未处理 </button>
        <button
          v-if='item.status==1?true:false'>
          成功 </button>
        <button
          v-if='item.status==2?true:false'>
          驳回 </button>
      </div>
    </v-list>
    <component :is=name
      @func='send'>
      <van-cell-group>
        <van-field
          label="联系我们"
          value='19921559542（微信）'
          disabled />
        <van-field label="类型"
          v-model="taskinfo.typename"
          disabled />
        <van-field label="价格"
          v-model="taskinfo.price"
          disabled />
        <van-field
          type='textarea'
          v-model="taskinfo.detail"
          label="详情"
          disabled />
        <van-field
          label="投诉详情"
          v-model="taskinfo.cDetail"
          disabled />
        <van-field
          label="截止时间"
          v-model="taskinfo.timeLimit"
          disabled />
        <van-field
          label="完成时间"
          v-model="taskinfo.finishTime"
          disabled />
        <van-field
          label="投诉时间"
          v-model="taskinfo.cTime"
          disabled />
        <div class='imgbox'
          v-if='taskinfo.MImages?false:true'>
          <img
            v-for='(item,index) in taskinfo.MImages'
            :key=index
            :src=item>
        </div>

      </van-cell-group>
    </component>
  </div>
</template>

<script>
import title from './title'
import time from '../../JS/time'
import changType from '../../JS/ctype.js'
export default {
  name: 'complaint',
  data() {
    return {
      status: '',
      Complaintlist: [],
      name: '',
      taskinfo: {},
    }
  },
  props: {},
  components: {
    'v-title': () => import('../myinfo/title.vue'),
    'v-list': () => import('../list.vue'),
    'v-taskinfo': () => import('../../components/taskinfo'),
  },
  computed: {},
  watch: {},
  created() {},
  mounted() {
    this.getComplaintlist(0)
  },
  methods: {
    onClick(name) {
      console.log(name)
      this.status = name
      this.getComplaintlist(name)
    },
    getComplaintlist(id) {
      if (id == 0) {
        this.http({
          method: 'post',
          url: '/api/getComplaintByExample',
          headers: {
            'Content-Type': 'application/x-www-form-urlencoded',
          },
          params: {
            uid: window.localStorage.getItem('uid'),
            token: window.localStorage.getItem('token'),
          },
        }).then((res) => {
          this.Complaintlist = res.data.data
          changType(this.Complaintlist)
        })
      }
      if (id == 1) {
        this.http({
          method: 'post',
          url: '/api/getReceivedComplaintByExample',
          headers: {
            'Content-Type': 'application/x-www-form-urlencoded',
          },
          params: {
            uid: window.localStorage.getItem('uid'),
            token: window.localStorage.getItem('token'),
          },
        }).then((res) => {
          console.log(res)
          this.Complaintlist = res.data.data
          changType(this.Complaintlist)
        })
      }
    },
    gettaskinfo(id, index) {
      this.name = 'v-taskinfo'
      this.taskinfo = this.Complaintlist[index]
      this.http({
        method: 'post',
        url: '/api/admin/getComplaint',
        headers: {
          'Content-Type': 'application/x-www-form-urlencoded',
        },
        params: {
          uid: window.localStorage.getItem('uid'),
          token: window.localStorage.getItem('token'),
          mid: id,
        },
      }).then((res) => {
        switch (res.data.data.mission.tid) {
          case 1:
            this.taskinfo.typename = '代取快递'
            break
          case 2:
            this.taskinfo.typename = '代取外卖'
            break
          case 3:
            this.taskinfo.typename = '教室占座'
            break
          case 4:
            this.taskinfo.typename = '食堂带餐'
            break
          default:
            break
        }
        this.taskinfo.price = res.data.data.mission.price
        this.taskinfo.timeLimit = time(res.data.data.mission.timeLimit)
        this.taskinfo.finishTime = time(res.data.data.mission.finishTime)
        this.taskinfo.detail = res.data.data.mission.detail
        if (res.data.data.mission.MImages) {
          this.taskinfo.MImages = res.data.data.mission.MImages
        } else {
          this.taskinfo.MImages = []
        }

        this.taskinfo.cTime = time(res.data.data.complaint.cTime)
        this.taskinfo.cDetail = res.data.data.complaint.cDetail
      })
    },
    send(data) {
      this.name = data
    },
  },
}
</script>

<style scoped lang='less'>
#complaint {
  width: 100%;
  height: 100%;
  position: relative;
}
</style>
